<template>
  <div class="login">
    <a-row type="flex" class="login-wrapper">
      <a-col :flex="8" class="left">
        <img src="../../assets/img/img_logo.png" alt="" />
        <div class="slogen">
          <div>科技引领世界</div>
          <div>创新照耀未来</div>
          <span
            >Science and technology lead the world,innovation shine the
            future.</span
          >
        </div>
      </a-col>
      <a-col :flex="5" class="right">
        <div class="right-wrapper">
          <div class="title">项目管理系统</div>
          <a-form @submit="onSubmit" :form="form">
            <a-form-item>
              <a-input
                autocomplete="autocomplete"
                size="large"
                placeholder="账号"
                v-decorator="[
                  'name',
                  {
                    initialValue: name,
                    rules: [
                      {
                        required: true,
                        message: '请输入账号',
                        whitespace: true
                      }
                    ]
                  }
                ]"
              >
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                size="large"
                placeholder="密码"
                autocomplete="autocomplete"
                type="password"
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        initialValue: password,
                        required: true,
                        message: '请输入密码',
                        whitespace: true
                      }
                    ]
                  }
                ]"
              >
              </a-input>
            </a-form-item>
            <div style="overflow: hidden; margin-bottom: 60px">
              <a-checkbox style="float: right" v-model="remember"
                >记住我</a-checkbox
              >
              <!-- <router-link to="/forget" style="float: right"
                >忘记密码</router-link
              > -->
            </div>
            <a-form-item>
              <a-button
                :loading="logging"
                style="width: 100%; margin-top: 10px"
                size="large"
                htmlType="submit"
                type="primary"
                >登录</a-button
              >
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { login, getRoutesConfig } from "@/services/user";
import { umenu } from "@/services/menu";
import { setAuthorization } from "@/utils/request";
// eslint-disable-next-line no-unused-vars
import { loadRoutes } from "@/utils/routerUtil";
import { mapMutations } from "vuex";
import Cookie from "js-cookie";
export default {
  name: "Login",
  data() {
    return {
      logging: false,
      remember: true,
      name: "",
      password: "",
      form: this.$form.createForm(this)
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    }
  },
  mounted() {
    // console.log(Cookie.get("222"), 333);
    Cookie.get("name") && (this.name = Cookie.get("name"));
  },
  methods: {
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          const name = this.form.getFieldValue("name");
          const password = this.form.getFieldValue("password");
          login(name, password)
            .then(this.afterLogin)
            .catch((err) => {
              console.log(err);
              this.logging = false;
            });
        }
      });
    },
    afterLogin(res) {
      // console.log(JSON.stringify(res.data.data), "登录返回的数据");
      // console.log(typeof res.data, '登录返回的数据')
      this.logging = false;
      const loginRes = res.data;
      // console.log(loginRes, "login");
      if (loginRes.code === 20000) {
        this.setUser({
          department_id:loginRes.data.department_id,
          user_id:loginRes.data.user_id,
          name: loginRes.data.name,
          avatar: loginRes.data.name,
          position: loginRes.data.roles ,
          permissions:loginRes.data.permissions,  
        });
        // this.setPermissions(permissions);
        // this.setRoles(roles);
     
        setAuthorization({
          token: loginRes.data.user_id,
          expireAt: new Date().getTime() + 3600000 // 一个小时过期
        });
        // 记住我
        this.remember
          ? Cookie.set("name", this.form.getFieldValue("name"))
          : Cookie.remove("name");
        // this.$message.success(loginRes.message, 2);
        // this.$router.push("/dashboard");
        // 获取路由配置
        // umenu();
        umenu().then((result) => {
          // eslint-disable-next-line no-unused-vars
          const routesConfig = result.data.data;
          // console.log(JSON.stringify(result), "routesConfig");
          loadRoutes(routesConfig);

          this.$message.success(loginRes.message, 2, () =>
            this.$router.push("/dashboard")
          );
        });
      }
    }
  }
};
</script>

<style lang="less">
.login {
  background-image: url("../../assets/img/login_backimg.png");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-wrapper {
    height: 80%;
    width: 85%;
    box-shadow: -2px 1px 24px 1px rgba(0, 3, 18, 0.28);
    .left {
      position: relative;
      background: rgba(255, 255, 255, 0.3);
      img {
        width: 200px;
        height: 74px;
        margin-top: 28px;
        margin-left: 36px;
      }
      .slogen {
        position: absolute;
        bottom: 60px;
        left: 58px;
        font-size: 28px;
        color: #fff;
        font-weight: lighter;
        font-family: Microsoft YaHei;
        div {
          margin-bottom: 10px;
        }
        span {
          font-size: 16px;
          color: #f3f3f3;
        }
      }
    }
    .right {
      background-color: #fff;
      height: 100%;
      .right-wrapper {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 90px;
        height: calc(100% - 90px);
        input {
          border: none;
          border-bottom: 1px solid #aaaaaa;
          border-left: 4px solid #fff !important;
          border-right: 4px solid #fff !important;
          outline: none !important;
          padding-left: 0 !important;
          padding-bottom: 20px;
          font-size: 20px;
        }
        input::-webkit-input-placeholder {
          color: #666666;
        }

        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #666666;
        }

        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #666666;
          font-size: 17px;
        }

        input:-ms-input-placeholder {
          /* Internet Explorer 10-11 */
          color: #666666;
        }
        .ant-checkbox-inner {
          background-color: #aaaaaa !important;
          border-color: #aaaaaa !important;
        }
        .ant-input:focus {
          border-bottom: 1px solid #0097e0;
          -webkit-box-shadow: unset;
          box-shadow: unset;
        }
        .title {
          font-size: 32px;
          color: #0097e0;
          margin-bottom: 90px;
        }
        .ant-form-item {
          margin-bottom: 70px;
        }
        .ant-form-item:nth-child(3) {
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>
